<template>
  <div class="pay-wrapper">
    <div class="pay-content">
      <step-group :step-list="stepList"></step-group>
      <count-down
        tips-text="来确认订单，超时订单自动关闭"
        surplus-tips="订单支付已超时"
        :surplus-date="surplusDate"
        class="count-down"
        @timeout="timeout"
      ></count-down>
      <div class="content-wrapper">
        <el-table :data="orderlist" :header-cell-style="rowClass" :cell-style="cellStyle">
          <el-table-column width="150">
            <template slot-scope="scope">
              <div class="info-img">
                <img
                  class="img"
                  :src="scope.row.orderData.product.product_img.length == 0 ? require('@/assets/hall/default1.jpg'):scope.row.orderData.product.product_img[0]"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品信息">
            <template slot-scope="scope">
              <div class="info-wrapper">
                <span class="text">{{scope.row.orderData.product.product_name}}</span>
                <span
                  v-show="scope.row.orderData.product.product_place"
                >/{{scope.row.orderData.product.product_place}}</span>
                <span
                  v-show="scope.row.orderData.product.product_style"
                >/{{scope.row.orderData.product.product_style}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="总代理量" width="170">
            <template slot-scope="scope">￥{{scope.row.orderData.product.total_number}}</template>
          </el-table-column>
          <el-table-column label="代理费支付模式" width="170">
            <template
              slot-scope="scope"
            >{{scope.row.orderData.agent.agent_pay_way == 0 ? '按月支付' : '一次性支付'}}</template>
          </el-table-column>
          <el-table-column label="代理期限" width="170">
            <template
              slot-scope="scope"
            >{{scope.row.orderData.agent.agent_time ? scope.row.orderData.agent.agent_time + '个月' : '无限期'}}</template>
          </el-table-column>
          <el-table-column label="代理费率" width="170">
            <template
              slot-scope="scope"
            >{{scope.row.orderData.agent.agent_rate ? (scope.row.orderData.agent.agent_rate * 100).toFixed(4) + '%' : '-'}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="operation-wrapper">
        <el-button v-if="readFlag" type="primary" @click="_doOrder(1)">去结算并签署合同</el-button>
        <el-button v-else type="primary" class="is-disabled" @click="_doOrder(0)">去结算并签署合同</el-button>
      </div>

      <div class="read-box">
        <el-checkbox v-model="readFlag"></el-checkbox>
        <span>
          我已阅读并同意签署
          <span class="read-span" @click="_openAgentSsq">《代理合同》</span>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import StepGroup from "@/components/StepGroup/StepGroup";
import CountDown from "@/components/CountDown/CountDown";
import { doAgentOrder, doNoneOrder, openAgentSsq } from "@/api/agency";
const steplist = {
  step: 0,
  list: [
    {
      text: "下单",
      icon: require("@/assets/step/1.png"),
      iconCurr: require("@/assets/step/1_curr.png"),
    },
    {
      text: "平台审核",
      icon: require("@/assets/step/3.png"),
      iconCurr: require("@/assets/step/3_curr.png"),
    },
    {
      text: "代理成功",
      icon: require("@/assets/step/4.png"),
      iconCurr: require("@/assets/step/4_curr.png"),
    },
  ],
};

export default {
  name: "payno",
  data() {
    return {
      stepList: steplist,
      surplusDate: new Date().getTime() + 300000,
      orderlist: [],
      readFlag: true,
    };
  },
  created() {
    if (this.$route.params.id) {
      this._doAgentOrder();
    } else {
      this.$router.go(-1);
    }
  },
  computed: {},
  methods: {
    _openAgentSsq() {
      openAgentSsq({ type: 2 }).then((res) => {
        if (res.code == 1) {
          window.open(res.data.url);
        }
      });
    },
    _doAgentOrder() {
      doAgentOrder({
        product_id: this.$route.params.id,
        copies: this.$route.params.copies,
        token: this.$route.params.token,
      }).then((res) => {
        this.orderlist.push(res.data);
        console.log("商品信息", this.orderlist);
      });
    },
    _doOrder(flag) {
      if (flag) {
        doNoneOrder({
          product_id: this.$route.params.id,
        }).then((res) => {
          window.location.href = res.data.url;
        });
      } else {
        this.$message.error("请阅读并同意签署 《代理合同》");
      }
    },
    timeout() {
      this.$alert("订单已超时", "提示", {
        confirmButtonText: "返回海量货源",
        callback: (action) => {
          this.$router.push({ path: "/agency" });
        },
      });
    },
    rowClass() {
      return "background:rgba(240,249,252,1);font-size:14px;color:#999;font-weight:400;text-align:center;";
    },
    cellStyle() {
      return "height:110px;font-size:14px;color:#333;text-align:center;";
    },
  },
  components: {
    StepGroup,
    CountDown,
  },
};
</script>
<style lang="scss" scoped>
.pay-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #fff;
  .pay-content {
    min-width: 1200px;
    margin: 50px 10%;
  }
  .count-down {
    font-size: 14px;
    color: #f76060;
    margin-top: 50px;
  }
  .content-wrapper {
    margin-top: 50px;
  }
  .operation-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 53px;
    text-align: right;
    font-size: 14px;
    color: #999;
    border-bottom: 1px solid #ebf0f2;
    > span {
      margin-right: 50px;
      padding-bottom: 10px;
      .count {
        color: #f76060;
        font-weight: bold;
        &.price {
          font-size: 20px;
        }
      }
    }
    .el-button {
      margin-bottom: 7px;
    }
  }
  .read-box {
    text-align: right;
    margin-top: 10px;
    color: #999;
    font-size: 14px;
    .read-span {
      color: #333;
      cursor: pointer;
    }
  }
}
.info-img {
  img {
    width: 72px;
    height: 72px;
  }
}
</style>
